<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>chat</title>
    <script src="js/lib/vue.js"></script>
    <script src="js/utils/dateUtils.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        html, body {
            padding: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            /*超出隐藏，不滑动，固定整个页面*/
            overflow: hidden;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: 微软雅黑;
            letter-spacing: 0.03em;
            padding: 0;
        }

        .menuActive {
            background-color: #363e47;
            border-left: 5px solid #5cadff;
            color: #0000ff;
            padding: 5px 0 5px 0;
        }

        .userListActive {
            background-color: #404953;
            /*做边框颜色和背景一样，这样在点击时会加边框，就会导致内容右移，有个动画效果*/
            border-left: #404953 5px solid;
            color: #ff0000;
            padding: 5px 0 5px 0;
        }

        /*向右箭头*/
        .userListActive::after {
            content: "";
            width: 10px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -50%) rotate(-45deg);
            position: absolute;
            right: 5px;
            top: 50%;
        }

        /*新消息闪动红点，主要是它的after微元素*/
        .newMsg {

        }

        .newMsg::before {
            content: "";
            width: 10px;
            height: 10px;
            background: red;
            position: absolute;
            left: 2px;
            top: calc(50% - 5px);
            border-radius: 10px;
            animation-name: myfirst;
            animation-duration: 1.5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
            /* Safari and Chrome: */
            -webkit-animation-name: myfirst;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 0s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }

        @keyframes myfirst {
            0% {
                background: #363e47;
            }
            100% {
                background: red;
            }
        }

        @-webkit-keyframes myfirst {
            0% {
                background: #363e47;
            }
            100% {
                background: red;
            }
        }

        .dialogList .item {
            height: 50px;
            min-width: 200px;
            width: calc(100% - 25px);
            cursor: pointer;
            position: relative;
            padding: 10px;
            text-align: left;
        }

        .dialogList .item:hover {
            background-color: #404953;
        }

        .panel {
            background-color: rgba(0, 0, 0, 0.2);
            width: 80%;
            height: 80%;
            /*百度vh单位有介绍,vh是可视窗口宽度(比方说F12时这个窗口也会跟着缩小，但是px的话不会)，其余个方向必须auto才会水平居中，否则body的center无效*/
            margin: 8vh auto auto auto;
            display: -webkit-flex;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: center;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .menu {
            background-color: #303841;
            box-sizing: border-box;
            width: 8%;
            min-width: 50px;
            height: 100%;
            position: relative;
        }

        .dialogList {
            background-color: #363e47;
            width: 20%;
            height: 100%;
            min-width: 150px;
        }

        .chatTab {
            width: 100%;
            background-color: #F5F5F5;
            display: -webkit-flex;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            justify-content: space-between;
        }

        .chatTab .messageTabTitle {
            height: 50px;
            border-bottom: 1px solid #e7e7e7;
        }

        .chatTab .userMessageTabs {
            height: calc(100% - 225px);
            padding: 10px;
        }

        .chatTab .userMessageTabs .messageTab {
            height: 100%;
            width: 100%;
            overflow-y: auto;
        }

        .chatTab .inputBox {
            height: 150px;
            border-top: 1px solid #e7e7e7;
        }

        ::-webkit-scrollbar {
            /*隐藏滚动条，ie无效*/
            display: none;
        }

        .msgClass {
            padding: 10px 20px 10px 20px;
            border-radius: 5px;
            max-width: 500px;
            word-wrap: break-word;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        }

        .msgLeft {
            float: left;
            background-color: #FFFFFF;
        }

        .msgRight {
            float: right;
            background-color: #5cadff;
        }

        .inputBtnBar {
            padding-top: 5px;
            height: 30px;
        }

        .inputBtnBar li {
            width: 30px;
            height: 30px;
            display: inline-block;
            float: left;
            padding-left: 10px;
            cursor: pointer;
        }

        .sendBtn {
            width: 50px;
            height: 35px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-size: 100% 100%;
            background-image: url("img/send.png");
            cursor: pointer;
        }

        .msgImgClass {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #FFFFFF;
            max-width: 500px;
            max-height: 500px
        }

        .wordLoopClass {
            float: left;
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            animation: 10s wordsLoop linear infinite normal;
            -webkit-animation: 10s wordsLoop linear infinite normal;
        }

        @keyframes wordsLoop {
            0% {
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

        .mainMenu {
            background: #ededed;
            height: 60px;
            position: relative;
            z-index: 1;
            box-shadow: 0px 2px 2px #888888;
        }

        .dropdown {
            float: left;
            margin-left: 20px;
            position: relative;
            display: inline-block;
        }

        .quit {
            float: left;
            margin-left: 20px;
            position: relative;
            display: inline-block;
        }

        .dropbtn, .mainMenuBtn {
            background-color: #ededed;
            color: #888888;
            outline: none;
            width: 100px;
            height: 60px;
            padding: 10px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropbtn:active {
            background-color: #ffffff;
        }

        .mainMenuBtn:active {
            background-color: #ffffff;
        }

        .dropdown-content {
            position: absolute;
            max-height: 500px;
            overflow: scroll;
            background-color: #f9f9f9;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            height: 20px;
            min-width: 80px;
            white-space: nowrap;
            padding: 10px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .bounce-enter-active {
            animation: bounce-in .5s forwards;
            -webkit-animation: bounce-in .5s forwards;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse forwards;
            -webkit-animation: bounce-in .5s reverse forwards;
        }

        @keyframes bounce-in {
            0% {
                margin-top: -60px;
            }
            100% {
                margin-top: 0;
            }
        }

        @-webkit-keyframes bounce-in {
            0% {
                margin-top: -60px;
            }
            100% {
                margin-top: 0;
            }
        }

        .toggleMainMenu::after {
            content: "";
            width: 10px;
            height: 10px;
            cursor: pointer;
            border: solid #bbbbbb;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
            position: absolute;
            right: 50%;
        }
    </style>
</head>
<script>
    var app;
    var contextPath = "";
    window.onload = function (ev) {
        app = new Vue({
            el: "#app",
            data: {
                showDropGroupList: false,
                showMainMenu: false,
                messageReceiver: {},
                //消息缓存，切换tab的时候使用缓存
                messages: {},
                //记录每个dialog的最大messageId，key为dialogId，下次以增量获取，暂未使用
                dialogMessageMaxId: {},
                //输入框在中正在输入的消息
                typingMessage: "",
                activeUserName: "",
                activeDialogId: -1,
                activeDialogGroupName: "",
                menuActiveTab: 0,
                userListActiveTab: 0,
                dialogList: [{
                    username: "111",
                    nickname: "222",
                    kefuname: "333",
                    groupId: "退货处理",
                    status: 0
                }, {status: 0, username: "111", nickname: "222", kefuname: "333", groupId: "退货处理"}],
                dialog: {current: [], history: []},
                activeMessages: [],
                groups: [{id: 1, name: "abcd1"}, {id: 1, name: "abcd1"}, {id: 1, name: "abcd1"}, {
                    id: 1,
                    name: "abcd1"
                }, {id: 1, name: "abcd1"}]
            },
            updated: function () {
                // 更新完成后，默认让聊天框滚动条在最底部
                var div = document.getElementById("dialog_" + this.activeDialogId);
                if (div) div.scrollTop = div.scrollHeight;
            },
            created: function () {
                // this.initDialogList(0);
            },
            mounted: function () {
                // 页面加载完之后开始刷新消息
                // this.pollingMessage();
            },
            methods: {
                changeDialogListTab: function (index, dialog) {
                    this.userListActiveTab = index;
                    // 标记为已读
                    dialog.status = 1;
                    this.messageReceiver = {id: dialog.kefuId};
                    this.activeDialogId = dialog.id;
                    this.activeUserName = dialog.nickname;
                    if (this.messages[dialog.id]) {
                        this.activeMessages = this.messages[dialog.id];
                    } else {
                        //如果messages中没有，就全量获取
                        var _this = this;
                        axios({
                            url: contextPath + "/message/init/" + dialog.id,
                            method: "get",
                            headers: {token: "uid"}
                        }).then(function (response) {
                            _this.activeMessages = response.data.resultBody.body;
                            _this.messages[dialog.id] = _this.activeMessages;
                        }).catch(function (reason) {
                            console.log(reason)
                        });
                    }
                },
                sendMessage: function () {
                    if (!this.messageReceiver.id) {
                        return;
                    }
                    if (this.typingMessage.length == 0) {
                        alert("消息内容不能为空");
                        return;
                    }
                    var _this = this;
                    var msg = {
                        content: this.typingMessage,
                        sender: 1,
                        type: 0,
                        dialogId: this.activeDialogId,
                        createTime: dateFormat(new Date(), "yyyy-MM-dd HH:mm:ss")
                    };
                    axios({
                        url: contextPath + "/message/send/" + _this.messageReceiver.id,
                        method: "post",
                        data: msg,
                        contentType: "application/json; charset=utf-8",
                        headers: {token: "uid"}
                    }).then(function (response) {
                        var code = response.data.code;
                        if (code == 0) {
                            _this.activeMessages.push(msg);
                            //messages里面的key和上面是同一个地址，重复添加造成消息重复
                            // this.messages[this.activeDialogId].push(msg);
                            //清空输入框
                            _this.typingMessage = "";
                        }
                    }).catch(function (reason) {
                        alert("消息发送失败");
                    })
                },
                initDialogList: function (index) {
                    this.menuActiveTab = index;
                    var key = index == 0 ? "current" : "history";
                    // 如果有缓存用缓存
                    if (this.dialog[key].length > 0) {
                        this.dialogList = this.dialog[key];
                        return;
                    }
                    var _this = this;
                    var url = index == 0 ? "/dialog/current" : "/dialog/history";
                    //初始化dialog列表
                    axios({
                        url: contextPath + url,
                        method: "get",
                        headers: {token: "uid"}
                    }).then(function (response) {
                        var code = response.data.code;
                        if (code == 0) {
                            _this.dialogList = response.data.resultBody.body;
                            _this.dialog[key] = response.data.resultBody.body;
                        }
                        //第一次请求网络时，默认打开列表中第一条会话
                        if (_this.dialogList.length > 0) {
                            _this.changeDialogListTab(0, _this.dialogList[0])
                        }
                    }).catch(function (reason) {
                        console.log(reason)
                    });
                },
                initHistoryDialogList: function () {
                    var _this = this;
                    axios({
                        url: contextPath + "/dialog/history",
                        method: "get",
                        headers: {token: "uid"}
                    }).then(function (response) {
                        _this.historyDialogList = response.data.resultBody.body;
                    }).catch(function (reason) {
                        console.log(reason)
                    });
                },
                toggleMainMenu: function () {
                    this.showMainMenu = !this.showMainMenu;
                    console.log(this.showMainMenu);
                },
                findKefu: function (gorupId) {
                    alert(gorupId);
                    this.$refs.findKefuBtn.innerHTML = "正在分配客服...";
                    this.$refs.findKefuBtn.disabled = true;
                    this.showDropGroupList = false;
                    var _this = this;
                    axios({
                        url: contextPath + "/dialog/inQueue/" + groupId,
                        method: "get",
                        headers: {token: "uid"}
                    }).then(function (response) {
                        _this.$refs.findKefuBtn.innerHTML = "人工客服";
                        _this.$refs.findKefuBtn.disabled = false;
                    }).catch(function (reason) {
                        _this.$refs.findKefuBtn.innerHTML = "人工客服";
                        _this.$refs.findKefuBtn.disabled = false;
                    });
                },
                pollingMessage: function () {
                    var _this = this;
                    axios({
                        url: contextPath + "/message/polling",
                        method: "get",
                        headers: {token: "uid"}
                    }).then(function (response) {
                        var dialogMapList = response.data.resultBody.body;
                        if (dialogMapList[_this.activeDialogId]) {
                            _this.activeMessages = dialogMapList[_this.activeDialogId];
                        }
                        for (var key in dialogMapList) {
                            _this.messages[key] = dialogMapList[key];
                            if (key == _this.activeDialogId) {
                                continue;
                            }
                            for (var idx = 0; idx < _this.dialogList.length; idx++) {
                                if (_this.dialogList[idx].id == key) {
                                    // 标记该会话为未读
                                    _this.dialogList[idx].status = 0;
                                    break;
                                }
                            }
                        }
                    }).catch(function (reason) {
                        console.log(reason);
                    });
                }
            }
        });
    }
</script>
<body style="text-align: center;background: url('img/bg.jpg');background-position:100% 100%; background-repeat:no-repeat;">


<div style="height: 100%;width: 100%" id="app">
    <div style="position: absolute;width: 100%;top:0;">
        <transition style="position: relative" name="bounce">
            <div class="mainMenu" v-if="showMainMenu">
                <div class="dropdown">
                    <button ref="findKefuBtn" @click="showDropGroupList = !showDropGroupList" class="dropbtn">人工客服
                    </button>
                    <div v-if="showDropGroupList" class="dropdown-content">
                        <a v-for="group in groups" :id="group.id" @click="findKefu(group.id)">{{group.name}}</a>
                    </div>
                </div>
                <div class="quit">
                    <button @click="quit()" class="mainMenuBtn">退出</button>
                </div>
            </div>
        </transition>
        <div @click="toggleMainMenu()" class="toggleMainMenu"></div>
    </div>

    <div class="panel">
        <div class="menu">
            <div>
                <img src="img/bg.jpg" style="width: 50px;height:50px;border-radius: 50px;margin: 10px 0 20px 0">
            </div>
            <div style="max-height: calc(100% - 100px);overflow-y: auto;">
                <ul style="list-style: none">
                    <li style="cursor: pointer" :class="{menuActive: menuActiveTab==0}" @click="initDialogList(0)">
                        <img src="img/message.png" style="padding: 5px"></li>
                    <li style="cursor: pointer" :class="{menuActive: menuActiveTab==1}" @click="initDialogList(1)">
                        <img src="img/history.png" style="padding: 5px"></li>
                </ul>
            </div>
            <div style="position: absolute;bottom: 0;width:100%;text-align: center">
                <img src="img/out_normal.png" title="退出" style="cursor: pointer;width: 40px;height:40px;padding: 5px">
            </div>
        </div>
        <div class="dialogList" id="dialogList">
            <!-- 这个100%必须要，否则会超出外层div的大小 -->
            <div style="width:100%;height: 100%;overflow-y: auto;">
                <ul style="list-style: none">
                    <li class="item" v-for="(dialog,index) of dialogList"
                        :class="{userListActive: userListActiveTab==index,newMsg: userListActiveTab!=index && dialog.status==0}"
                        @click="changeDialogListTab(index,dialog)">
                        <div style="display: inline-block">
                            <img src="img/bg.jpg"
                                 style="float: left;margin-right: 10px ;padding:5px; width: 40px;height: 40px;border-radius: 50px">
                            <div style="float: left;max-width:100px">
                                <div style="white-space: nowrap;overflow: hidden;height: 20px; padding-top: 5px;color: #f7f7f8">
                                    {{dialog.realname}} ({{dialog.nickname}})
                                </div>
                                <div style="white-space: nowrap;overflow: hidden;font-size: 12px;color: #a5b5c1">
                                    {{dialog.groupId}}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="chatTab">
            <div class="messageTabTitle" id="messageTabTitle">
                <div style="padding: 5px;float: left">
                    <img style="height: 40px;width: 40px;border-radius: 40px" src="img/bg.jpg"/>
                    <div style="display: inline-block; color: #1c2438; font-size: 18px; text-shadow: #76828c 0 0 0.1em; font-weight: 700; max-width: 200px;overflow: hidden; height: 50px;vertical-align: middle">
                        <div class="wordLoopClass">{{activeUserName}} -- {{activeDialogGroupName}}</div>
                    </div>
                </div>

            </div>
            <div class="userMessageTabs" id="userMessageTabs">
                <div class="messageTab" :id="'dialog_'+dialog.id" v-for="(dialog,index) of dialogList"
                     v-if="activeDialogId==dialog.id">
                    <div style="width: 100%;padding: 10px 0 10px 0;display: inline-block"
                         v-for="(msg,index) of activeMessages">
                        <div class="msgClass" :class="[msg.sender==1 ? 'msgRight' : 'msgLeft']">
                            <div style="font-size: 14px;text-align: left" v-if="msg.type==0">{{msg.content}}</div>
                            <div style="font-size: 14px;text-align: left" v-if="msg.type==1"><img class="msgImgClass"
                                                                                                  :src="msg.content">
                            </div>
                            <div style="color: #a5b5c1;font-size: 12px">{{msg.createTime}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="inputBox" id="inputBox">
                <div class="inputBtnBar">
                    <li><img style="width: 100%;height: 100%" src="img/emoji.png"></li>
                    <li><img style="width: 100%;height: 100%" src="img/file.png"></li>
                </div>
                <div style="position:relative;padding: 10px">
                <textarea v-model="typingMessage" @keydown.ctrl.enter="sendMessage()" rows="5"
                          style="resize: none;width: 100%;border: none;outline: none;background-color: transparent"></textarea>
                    <div class="sendBtn" @click="sendMessage()">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>